<template>
  <div ref="chart" style="width: 100%; height: 600px"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
import chinaMap from "./china.json";
const chart = ref();
const option = reactive({
  series: [
    {
      type: "map",
      map: "china",
      data: [
        { name: "青海省", value: 123 },
        { name: "河南省", value: 100 },
      ],
      label: {
        show: true,
        color: "#fff",
        fontSize: 11,
      },
      itemStyle: {
        areaColor: "#219edb",
        borderColor: "#fff",
      },
      emphasis: {
        label: {
          color: "#000",
          fontSize: 12,
        },
        itemStyle: {
          areaColor: "#f60",
          borderColor: "#219edb",
        },
      },
    },
  ],
  tooltip: {
    trigger: "item",
    formatter: "{b}<br/>{c}",
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {},
    },
  },
  visualMap: {
    min: 1,
    max: 100,
    text: ["High", "Low"],
    realtime: false,
    calculable: true,
    inRange: {
      color: ["lightskyblue", "yellow", "orangered"],
    },
    textStyle: {
      color: "#fff",
    },
  },
});

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(chart.value);
  echarts.registerMap("china", chinaMap);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});
</script>

<style>
</style>